$(function () {
    let q = {
        pagenum: 1, // 页码值
        pagesize: 2,
        cate_id: '',
        state: ''
    }
    //初始化文章列表
    initArticleList()

    let layer = layui.layer

    function initArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(res => {
            //成功回调
            //console.log(res.data.data)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                    <td>${ele.title}</td>
                    <td>${ele.cate_name}</td>
                    <td>${formatDate(ele.pub_date)}</td>
                    <td>${ele.state}</td>
                    <td>
                        <a href="/article/art_edit.html?=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button data-id="${
                          ele.Id
                        }" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
                `)
            })
            // 循环结束,赋值
            $('tbody')
                .empty()
                .html(arr.join(''))
            // 分页
            renderPage(res.data.total)
        })
    }

    // 渲染筛选中的文章类别列表
    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get'
        }).then(res => {
            //成功回调
            //console.log(res)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功后直接渲染
            let arr = [`<option value="">请选择文章所属分类</option>`]
            //遍历返回的数据
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            //赋值
            $('[name=cate_id]')
                .empty()
                .html(arr.join(''))
            form.render()
        })
    }

    // 筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新渲染 文章列表
        initArticleList()
    })

    // 分页
    function renderPage(total) {
        let laypage = layui.laypage
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, // 每页显示多少条
            curr: q.pagenum, // 第几页
            limits: [2, 3, 5, 10],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],

            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }

    // 删除
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm(
            '确认删除吗?', {
                icon: 3,
                title: '提示'
            },
            function (index) {
                axios({
                    url: '/my/article/delete/' + id,
                    method: 'get'
                }).then(res => {
                    //成功回调
                    //console.log(res)
                    if (res.data.status !== 0) {
                        return layer.msg(res.data.message)
                    }
                    // 成功 提示
                    layer.msg('删除文章成功')
                    $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
                    initArticleList()
                })
                layer.close(index)
            }
        )
    })
})